<template>
  <div class="cart">
    <div class="cart-header">
      <div class="header">
        <div class="logo">
          <img
            src="../../../public/pjimage/logo.png"
            alt=""
          >
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">购物车</el-breadcrumb-item>
          <el-breadcrumb-item>确认订单</el-breadcrumb-item>
          <el-breadcrumb-item>在线支付</el-breadcrumb-item>
          <el-breadcrumb-item>完成</el-breadcrumb-item>
        </el-breadcrumb>
        <div
          class="cart-login"
          v-if="!isLogin"
        >
          <a href="">我的订单</a>
          <a href="">登录</a>
          <a href="">注册</a>
        </div>
        <div
          class="cart-islogin cart-login"
          v-else
        >
          <a href="">我的订单</a>
          <li class="cart-user">
            <span>用户XXX</span>的商城∨
            <ul>
              <li>地址管理</li>
              <li>我的收藏</li>
              <li>我的回购金</li>
              <li>问题反馈</li>
            </ul>
          </li>
        </div>

      </div>
    </div>
    <div class="cart-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix cart-title cart-flex"
        >
          <p><input
              type="checkbox"
              @click="selectAll"
              :checked="allChecked"
            >全选</p>
          <p>单价(元)</p>
          <p>数量</p>
          <p>小计</p>
          <p
            @click="edit"
            v-if="isDelete"
          >编辑</p>
          <p
            @click="edit"
            v-else
          >完成</p>
        </div>
        <!-- 商品列表 -->
        <div
          class="cart-flex cart-list"
          v-for="(good,index) in goodslist"
          :key="index"
          v-show="goodslist!==0"
        >
          <div class="cart-flex good-info">
            <input
              type="checkbox"
              @click="selectedSingle(index)"
              :checked="allSelectedGoods.indexOf(good.id)>=0"
            >
            <!-- :checked="true" -->
            <img
              src="https://openfile.meizu.com/group1/M00/08/10/Cgbj0F8jhN2ASUlQAAheUlG1H9k034.png120x120.jpg"
              alt=""
            >
            <p class="good-info-title">
              <span>{{good.title}}</span>
              <br>
              <span>全网通公开版</span>
              <span>AG星际灰</span>
              <span>8+128GB</span></p>

          </div>
          <p class="price-one">¥{{good.price_single}}.00</p>
          <p class="number">
            <el-input-number
              class="number"
              v-model="good.count"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </p>
          <p class="price-total">¥{{good.count*good.price_single}}.00</p>
          <p
            class="edit"
            v-if="isDelete"
          >--</p>
          <p
            class="edit"
            @click="Delete"
            v-else
          >×</p>
        </div>
      </el-card>
      <!-- 结算区 -->
      <div class="cart-all">
        <el-card>
          <div class="cart-flex">
            <p><input
                type="checkbox"
                @click="selectAll"
                :checked="allChecked"
              >全选</p>
            <p>删除选中的商品</p>
            <p>共<span>{{goodslist.length}}</span>件商品,已选择<span class="selectedCount">{{selectedCount}}</span>件</p>
            <p>已优惠<span class="price-sell">0.00</span>元,合计(不含运费):<span class="price-all">¥{{totalPrice}}.00</span></p>
            <p>去结算</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    //头部判断是否登录
    isLogin: true,
    //编辑删除状态
    isDelete: true,
    //计数器的初始数字
    // num: "1",
    //全选
    allChecked: false, //控制全选
    allSelectedGoods: [], //存放被选择的数据
    //模拟商品数据
    goodslist: [
      { id: 0, title: "魅族17", count: 7, price_single: 3699 },
      { id: 1, title: "魅族17Pro", count: 1, price_single: 3099 },
      { id: 2, title: "魅族17老用户", count: 2, price_single: 2699 },
    ],
  }),
  created() {},
  methods: {
    //计数器的方法

    //全选功能
    selectAll() {
      if (!event.currentTarget.checked) {
        this.allSelectedGoods = [];
        this.allChecked = false;
      } else {
        this.allSelectedGoods = [];
        this.goodslist.forEach((el, index) => {
          this.allSelectedGoods.push(index);
          // this.allSelectedGoods.el.checked="true"
        });
        this.allChecked = true;
      }
      console.log(this.allSelectedGoods);
    },
    //单选
    selectedSingle(index) {
      if (event.currentTarget.checked) {
        this.allSelectedGoods.push(this.goodslist[index].id);
        if (this.allSelectedGoods.length === this.goodslist.length) {
          this.allChecked = true;
        }
        // console.log("选中");
      } else {
        // console.log("取消");
        for (var i = 0; i < this.allSelectedGoods.length; i++) {
          if (this.goodslist[index].id === this.allSelectedGoods[i]) {
            this.allSelectedGoods.splice(i, 1);
            this.allChecked = false;
            break;
          }
        }
      }
      console.log(this.allSelectedGoods);
    },
    //编辑删除
    edit() {
      this.isDelete = !this.isDelete;
    },
    //删除功能
    Delete() {
      // if (confirm("你确认删除此商品吗")) {
      //   for (var i=0; i <= this.goodslist.length; i++) {
      //     console.log(this.goodslist[i])
      //     //判断在不在已选中框的里列表里面
      //     // if (this.allSelectedGoods.indexOf(this.goodslist[i].id) !== -1) {
      //     //   var index = this.allSelectedGoods.indexOf(this.goods[i].id);
      //     //   //删除选中框列表
      //     //   this.allSelectedGoods.splice(index, 1);
      //     //   //删除数组中的
      //     //   this.goodslist.splice(i, 1);
      //     // } else {
      //     //   // this.goodslist.splice(i, 1);
      //     // }
      //   }
      // }
    },
  },
  computed: {
    //总价
    totalPrice() {
      var totalPrice = 0;
      this.goodslist.forEach((el, index) => {
        // console.log(el);
        if (this.allSelectedGoods.indexOf(el.id) !== -1) {
          totalPrice += el.price_single * el.count;
        }
      });
      return totalPrice;
    },
    //已选择多少件
    selectedCount() {
      var selectedCount = 0;
      selectedCount = this.allSelectedGoods.length;
      return selectedCount;
    },
  },
};
</script>
<style lang="less">
.cart {
  width: 100%;
  background-color: #f4f6fa;
  //购物车头部
  .cart-header {
    width: 100%;
    background-color: #fff;
    .header {
      border-top: 1px solid #000;
      width: 1240px;
      margin: 0 auto;
      height: 80px;
      .logo {
        float: left;
        margin-top: 28px;
        img {
          display: block;
          width: 125px;
          height: 23px;
        }
      }
      .el-breadcrumb {
        float: left;
        font-size: 14px;
        margin-left: 130px;
        margin-top: 33px;
      }
      .cart-login {
        float: right;
        font-size: 12px;
        a {
          padding: 0 15px;
          line-height: 80px;
          text-decoration: none;
          color: #666666;
        }
        a:hover {
          color: rgb(102, 189, 240);
        }
      }
      .cart-islogin {
        list-style: none;
        .cart-user {
          padding: 10px 0;
          padding-left: 10px;
          width: 100px;
          position: relative;
          display: inline-block;
          color: #666666;
          // border: 1px solid #888888;
          ul {
            width: 112px;
            background-color: #fff;
            position: absolute;
            list-style: none;
            padding: 0;
            margin: 0;
            left: -1px;
            top: 30px;
            display: none;
            // border: solid 1px#000;
            li {
              padding: 5px 11px;
            }
          }
        }
        .cart-user:hover {
          color: rgb(102, 189, 240);
          ul {
            display: block;
            color: #888888;
          }
          ul li:hover {
            background-color: #f8f7f7;
          }
        }
      }
    }
  }
  .cart-container {
    width: 1240px;
    margin: 0 auto;
    padding-top: 20px;
    //已选择
    .selectedCount {
      color: #00c3f5;
    }

    //去除阴影
    .is-always-shadow {
      box-shadow: 0 0 0 0;
    }
    .el-card {
      width: 1240px;
      //购物车表格头部
      .el-card__header {
        padding: 0;
        padding-left: 24px;
      }
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both;
      }
      .cart-flex {
        display: flex;
        align-items: center;
      }
      .cart-title {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.4);
      }
      .cart-title p:nth-child(1),
      .good-info {
        width: 520px;
        color: #333;
        cursor: pointer;
        font-size: 14px;
        //选择框大小
        input {
          display: inline-block;
          width: 15px;
          height: 15px;
        }
      }
      .cart-title p:nth-child(2),
      .price-one {
        width: 208px;
        text-align: center;
      }
      .cart-title p:nth-child(3),
      .number {
        width: 200px;
        text-align: center;
      }
      .cart-title p:nth-child(4),
      .price-total {
        width: 160px;
        text-align: center;
      }
      .cart-title p:nth-child(5),
      .edit {
        width: 110px;
        text-align: right;
        color: #00c3f5;
        cursor: pointer;
      }
      //购物车列表
      .el-card__body {
        padding: 0;
        // padding-left: 24px;
        .cart-list {
          // margin-bottom: 10px;
          padding: 10px 0 10px 24px;

          border-bottom: 1px solid #efefef;
        }
        //商品名称及参数
        .good-info {
          img {
            width: 100px;
            height: 100px;
            align-items: center;
          }
          .good-info-title {
            font-size: 14px;
            color: #8c8c8c;
          }
          .good-info-title span:nth-child(1) {
            font-size: 16px;
            color: #262626;
          }
        }
        //单价
        .price-one {
          font-size: 16px;
          color: #666;
        }
        //数量
        .el-input-number {
          width: 85px;
          line-height: 24px;
          span {
            width: 24px;
            height: 22px;
            line-height: 22px;
            top: 2.5px;
          }
          .el-input__inner {
            padding: 0;
            height: 24px;
            line-height: 24px;
          }
        }
        //小计
        .price-total {
          color: #e02b41;
          font-size: 16px;
        }
        //编辑
        .edit {
          color: #333;
        }
      }
    }

    //底部结算
    .cart-all {
      padding-top: 20px;
      padding-bottom: 50px;
      .cart-flex {
        padding-left: 24px;
        align-items: center;
        color: #8c8c8c;
        font-size: 14px;
        position: relative;
      }
      .cart-flex p:nth-child(1) {
        color: black;
      }
      .cart-flex p:nth-child(2) {
        margin-left: 20px;
      }
      .cart-flex p:nth-child(3) {
        margin-left: 20px;
        span {
          padding: 0 5px;
        }
      }
      .cart-flex p:nth-child(4) {
        margin-left: 460px;
        .price-sell {
          color: #e02b41;
          padding: 0 5px;
        }
        .price-all {
          font-size: 20px;
          font-weight: bolder;
          color: #e02b41;
          margin-left: 14px;
        }
      }
      .cart-flex p:nth-child(5) {
        font-size: 14px;
        background-color: #f66567 !important;
        border-radius: 2px;
        padding: 10px 20px;
        color: white;
        position: absolute;
        right: 10px;
        top: -6px;
      }
    }
  }
}
</style>